<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group space-y-54">
			<view class="flex-col justify-start relative group_2">
				<view class="flex-col section_3 space-y-17 ">
					<text class="self-start text">当前余额</text>
					<view class="flex-row justify-between items-center">
						<view class="flex-row items-baseline space-x-6">
							<text class="text_4">￥</text>
							<text class="text_2">{{content.wallet.balance}}</text>
						</view>
						<view class="flex-row items-center button space-x-12" @click="toReflect">
							<text class="font_1 text_3">去提现 ></text>
							<!-- <image class="shrink-0 image_8" src="/static/more5.png" /> -->
						</view>
					</view>
				</view>
				<view class="flex-col section_4 space-y-23">
					<view class="flex-row justify-center items-center" style="height: 100%;">
						<view class="flex-row items-center " style="width: 47%;height: 100%;">
							<text class="image_10">累计收入</text>
							<text class="image_9" style="color: #FF3C2E;">￥{{content.wallet.money}}</text>
						</view>
						<view class="flex-row items-center " style="width: 47%;height: 100%;">
							<text class="image_10">待收益</text>
							<text class="image_9" style="color: #ED7500;">￥{{content.wallet.d_money}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col">
				<text class="self-start font_2 text_5">账单明细</text>
				<view class="flex-row items-center group_4">
					<view class="flex-row items-center shrink-0 relative section_5">
						<view class="section5 flex-row items-center justify-around" @click="content.show=!content.show">
							<text
								class="image_12">{{content.trend == 1 ? '订单收入' : content.trend == 2 ? '提现申请' : content.trend == 3 ? '提现驳回' : '描述'}}</text>
							<image class="image_14" src="/static/more4.png" />
						</view>
						<view class="popupaItem flex-row items-center" @click="toTrend(1)"
							:style="content.show?'top:60rpx;':''">订单收入</view>
						<view class="popupaItem flex-row items-center" @click="toTrend(2)"
							:style="content.show?'top:120rpx;':''">提现申请</view>
						<view class="popupaItem flex-row items-center" @click="toTrend(3)"
							:style="content.show?'top:180rpx;':''">提现驳回</view>
					</view>
					<view class="flex-row justify-around items-center flex-auto section_6">
						<image class="image_13" src="/static/calendar1.png" />
						<picker mode="date" class="picker" :value="content.start_date" @change="bindDateChange($event,1)">
							<text class="font_3">{{content.start_date!=''?content.start_date:'----------'}}</text>
						</picker>
						<text class="font_3 text_7">-</text>
						<picker mode="date" class="picker" :value="content.end_date" @change="bindDateChange($event,2)">
							<text class="font_3">{{content.end_date!=''?content.end_date:'----------'}}</text>
						</picker>
					</view>
					<view class="flex-col justify-start items-center shrink-0 button_2" @click="toList">
						<text class="font_1 text_6">搜索</text>
					</view>
				</view>
				<view class="flex-col">
					<view class="flex-row justify-between items-center list-item" :key="i"
						v-for="(item, i) in content.list">
						<view class="flex-col items-start space-y-26">
							<text class="font_4 text_8">{{item.detail}}</text>
							<view class="group_5 view">
								<text class="font_5">{{item.create_time}}</text>
							</view>
						</view>
						<text class="font_2"
							:style="item.symbol==1?'color: #FF4200;':''">{{item.symbol==1?'+':'-'}}{{item.value}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let token = ref('')
	let p = ref(1)
	let content = ref({
		wallet: {},
		trend: '',
		start_date: '',
		end_date: '',
		list: [],
		show: false
	})
	onShow(() => {
		content.value.list.length = 0
		p.value = 1
		getDate()
		getlist()
	})
	onReachBottom(() => {
		p.value++
		getlist()
	})
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.getInfo,{
			shop_id:uni.getStorageSync('shop_id'),
		}).then(res => {
			if (res.flag == "success") {
				content.value.wallet = res.data
			}else{
				uni.showToast({
					title:res.message,
					icon:"none"
				})
			}
		})
	}
	const getlist = () => {
		let trend = content.value.trend == 1 ? '订单收入' : content.value.trend == 2 ? '提现申请' : content.value.trend == 3 ? '提现驳回' : ''
		let create_time =[ content.value.start_date, content.value.end_date]
		// if(content.value.start_date==""&&content.value.end_date==""){
		// 	create_time=""
		// }
		console.log(create_time,"create_time");
		if(content.value.start_date==''&&content.value.end_date!=""){
			uni.showToast({
				title:"请选择开始时间",
				icon:'none'
			})
			return
		}
		if(content.value.start_date!=''&&content.value.end_date==""){
			uni.showToast({
				title:"请选择结束时间",
				icon:'none'
			})
			return
		}
		proxy.$req.requestPOST(proxy.$api.CenterInfo.balanceRecords, {
			p: p.value,
			shop_id:uni.getStorageSync('shop_id'),
			detail: trend,
			create_time:JSON.stringify(create_time) 
		}).then(res => {
			console.log(res);
			if (res.flag == "success") {
				content.value.list = [...content.value.list, ...res.data.list]
				getDate()
			}else{
				uni.showToast({
					title:res.message,
					icon:"none"
				})
			}
			
			// console.log(content.value.list);
		})
	}
	const toTrend = (num) => {
		content.value.trend = num
		content.value.list.length = 0
		p.value = 1
		content.value.show = false
		getlist()
	}
	const toList = () => {
		content.value.list.length = 0
		p.value = 1
		getlist()
	}
	
	const bindDateChange=(e,num)=>{
		console.log(e,num);
		if(num==1){
			content.value.start_date=e.detail.value
		}else{
			content.value.end_date=e.detail.value
		}
	}
	const toChange = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.doExchange).then(res => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		})
	}
	const toReflect = () => {
		uni.navigateTo({
			url: '/pages/CashOut/CashOut'
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		// overflow-y: auto;
		// overflow-x: hidden;
		height: 100vh;

		.group {
			padding: 24rpx 28rpx 10rpx;
			// overflow-y: auto;

			.group_2 {
				padding-top: 33rpx;

				.section_4 {
					margin-right: 3rpx;
					margin-top: -10rpx;
					height: 100rpx;
					// padding: 220rpx 48rpx 30rpx;
					background-color: #f8f8f8;
					border-radius: 30rpx;

					.image_9 {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF4200;
						margin-left: 20rpx;
					}

					.image_10 {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					}
				}

				.space-y-23 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 23rpx;
					}
				}

				.section_3 {
					padding: 54rpx 0 54rpx 40rpx;
					background-image: url('/static/bg.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					z-index: 9;

					.text {
						margin-left: 10rpx;
						color: #ffffff;
						font-size: 26rpx;
						font-family: PingFang SC;
						line-height: 25rpx;
					}

					.space-x-6 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 6rpx;
						}

						.text_4 {
							color: #ffffff;
							font-size: 40rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 29rpx;
						}

						.text_2 {
							color: #ffffff;
							font-size: 60rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 46rpx;
						}
					}

					.button {
						padding: 22rpx 30rpx;
						padding-right: 20rpx;
						background-color: #ffffff;
						border-radius: 34rpx 0px 0px 34rpx;
						height: 68rpx;

						.text_3 {
							margin-left: 12rpx;
							color: #FF3C2E;
						}

						.image_8 {
							width: 9rpx;
							height: 18rpx;
						}
					}

					.space-x-12 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 12rpx;
						}
					}
				}

				.space-y-17 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 17rpx;
					}
				}

				.pos {
					position: absolute;
					left: 0;
					right: 3rpx;
					top: 0;
				}
			}

			.font_2 {
				font-size: 36rpx;
				font-family: PingFang SC;
				line-height: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.text_5 {
				line-height: 34rpx;
			}

			.group_4 {
				margin-top: 38rpx;

				.section_5 {
					width: 210rpx;
					background-color: #f0f1f2;
					border-radius: 12rpx;
					height: 69rpx;

					.section5 {
						width: 100%;
						height: 100%;
						z-index: 99;
						background-color: #f0f1f2;
						border-radius: 12rpx;
					}

					.image_12 {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #939293;
					}

					.image_14 {
						border-radius: 2rpx;
						width: 12rpx;
						height: 8rpx;
					}
				}

				.popupaItem {
					width: 210rpx;
					height: 68rpx;
					padding-left: 35rpx;
					background-color: #f5f5f5;
					position: absolute;
					z-index: 9;
					top: 0;
					transition: all .5s;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333;
					text-align: left;
				}

				.space-x-111 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 111rpx;
					}
				}

				.section_6 {
					margin-left: 25rpx;
					padding:0 12rpx;
					background-color: #f0f1f2;
					border-radius: 12rpx;
					height: 69rpx;
					.picker{
						margin-top: -8rpx;
					}
					.image_13 {
						width: 24rpx;
						height: 24rpx;
					}

					.font_3 {
						font-size: 20rpx;
						font-family: PingFang SC;
						line-height: 16rpx;
						color: #111;	
					}

					.text_7 {
						color: #333333;
						line-height: 2rpx;
					}
				}

				.button_2 {
					margin-left: 18rpx;
					margin-right: 3rpx;
					padding: 22rpx 0;
					background-color: #1ebdff;
					background-image: linear-gradient(0deg, #FD5463 0%, #FF3C2E 100%);
					border-radius: 12rpx;
					width: 88rpx;
					height: 68rpx;

					.text_6 {
						color: #ffffff;
						font-weight: 500;
						line-height: 23rpx;
					}
				}
			}

			.font_1 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 24rpx;
			}

			.list-item {
				padding: 38rpx 0 32rpx;
				border-bottom: solid 2rpx #f7f7f7;

				.space-y-26 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 26rpx;
					}

					.font_4 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.text_8 {
						line-height: 27rpx;
					}

					.group_5 {
						line-height: 18rpx;

						.font_5 {
							font-size: 22rpx;
							font-family: PingFang SC;
							line-height: 18rpx;
							color: #999999;
						}
					}

					.view {
						margin-left: 3rpx;
					}
				}
			}
		}

		.space-y-54 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 54rpx;
			}
		}
	}
</style>